{% extends "that_person_center/base.html" %}


{% block page_link %}

{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .file {
            position: relative;
            display: inline-block;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: white;
            line-height: 20px;
            text-decoration: none;
            text-indent: 0;
            background: #1E90FF;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .div_clase{
            display: inline-block;width: 300px;height: 30px;line-height: 30px;font-size: 14px;color: #0b0b0b;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .shade {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(36, 36, 36, 0.5);
            display: none;
            z-index: 10000;
        }
        #addForm {
            width: 800px;
            height: 620px;
            background: #F5F5F5;
            position: absolute;
            border: #dfdfdf solid 1px;
            margin: auto;
            border-radius: 3px;
            top: 50%;
            left: 50%;
            /* 实现鼠标拖拽使用css3效果 */
            transform: translate(-50%, -50%);
            display: none;
            z-index: 10100;
            font-size: 0;
        }

        #title {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;
            height: 50px;
            color: #0b0b0b;
            cursor: move;
            /*border: #dfdfdf solid 1px;*/
            width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }

        .search {
            width: 300px;
            display: flex;
            float: right;
            margin: 10px 0;
            margin-right: 1%;
            /*border: 1px solid red;*/
        }

        .search input {
            vertical-align: middle;
            float: left;
        / / 左浮动 flex: 4;
            height: 30px;
            width: 230px;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;
        / / 盒子模型，怪异IE盒子模型，width = content + border * 2 + padding * 2 padding-left: 10 px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        }

        .search button {
            float: right;
            flex: 1;
            height: 30px;
            width: 70px;
            line-height: 30px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        }

        .search button i {
            font-style: normal;
        }

        .search button:hover {
            font-size: 16px;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div id="new_models1" class="shade">
        <div id="new_models" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 700px;height: 500px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="box" style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                    <h5 id="modal-title" class="modal-title"
                        style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;">修改信息</h5>
                    <span onclick="close_models()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
                </div>
                <hr>
                <div style="height: 400px;width: 100%;padding-top: 2%;padding-left: 2%;overflow: auto;">
                    <div>
                        <label for="">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
                        <input id="real_name" type="text" placeholder="{{ realname }}" value="{{ realname }}" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" disabled>
                        <label for="" style="margin-left: 20px;">登录账号：</label>
                        <input id="username" type="text" placeholder="{{ job_number }}" value="{{ job_number }}" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" disabled>
                    </div>

                    <div style="margin-top: 2%;">
                        <label for="">所属科室：</label>
                        <input id="department" type="text" placeholder="{{ department }}" value="{{ department }}" style="width: 500px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)" onclick="show_model()">
                    </div>

                    <div style="margin-top: 2%;">
                        <label for="">岗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：</label>
                        <input id="position" type="text" placeholder="{{ position }}" value="{{ position }}" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                        <label for="" style="margin-left: 20px;">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：</label>
                        <input id="postJob" type="text" placeholder="{{ post_job }}" value="{{ post_job }}" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                    </div>

                    <div style="margin-top: 2%;">
                        <label for="">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：</label>
                        <input id="education" placeholder="{{ education }}" value="{{ education }}" type="text" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                        <label for="" style="margin-left: 20px;">政治面貌：</label>
                        <input id="political_outlook" placeholder="{{ political_outlook }}" value="{{ political_outlook }}" type="text" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                    </div>

                    <div style="margin-top: 2%;">
                        <label for="">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日：</label>
                        <input id="birthday" type="text" placeholder="{{ birthday }}" value="{{ birthday }}" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                        <label for="" style="margin-left: 20px;">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：</label>
                        <input type="text" id="age" placeholder="{{ age }}" value="{{ age }}" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                    </div>

                    <div style="margin-top: 2%;">
                        <label for="">移动电话：</label>
                        <input type="text" id="mobile" placeholder="{{ phine_num }}" value="{{ phine_num }}" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                        <label for="" style="margin-left: 20px;">电子邮箱：</label>
                        <input type="text" id="mailbox" placeholder="{{ email }}" value="{{ email }}" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                    </div>

                    <div style="margin-top: 2%;">
                        <label for="">微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信：</label>
                        <input type="text" id="wechat_number" placeholder="{{ wechat_number }}" value="{{ wechat_number }}" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                        <label for="" style="margin-left: 20px;">Q&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Q：</label>
                        <input type="text" id="QQ" style="width: 200px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" placeholder="{{ QQ }}" value="{{ QQ }}" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                    </div>
                </div>
                <hr>
                <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
                    <button onclick="update_user()" style="width: 100px;height: 30px;border: #dfdfdf solid 1px;margin-top: 10px;border-radius: 3px;background: #1E90FF;color: white;">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="new_models2" class="shade">
        <div id="new_models3" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 700px;height: 300px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="box2" style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                    <h5 id="modal-title2" class="modal-title"
                        style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;">修改密码</h5>
                    <span onclick="close_models2()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
                </div>
                <hr>
                <div style="height: 200px;width: 100%;padding-top: 2%;padding-left: 2%;overflow: auto;">
                    <div>
                        <label for="">原&nbsp;&nbsp;密&nbsp;&nbsp;码：</label>
                        <input id="old_pwd" type="text" style="width: 500px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;">

                    </div>

                    <div style="margin-top: 2%;">
                        <label for="">新&nbsp;&nbsp;密&nbsp;&nbsp;码：</label>
                        <input id="new_pwd" type="password" style="width: 500px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">
                    </div>

                    <div style="margin-top: 2%;">
                        <label for="">确认密码：</label>
                        <input id="confirm_password" type="password" style="width: 500px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;" onfocus="add_color(this.id)" onblur="del_color(this.id)">

                    </div>

                </div>
                <hr>
                <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
                    <button onclick="update_user2()" style="width: 100px;height: 30px;border: #dfdfdf solid 1px;margin-top: 10px;border-radius: 3px;background: #1E90FF;color: white;">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div style="width: 100%;height: 60px;padding-left: 2%;background: white;border-bottom: #cfcfcf solid 1px;">
        <div style="display: inline-block;vertical-align: top;width: 60px;">
            <img id="title_heard" src="../../static/personal_center/img/default.jpeg" alt="" style="width: 60px;height: 60px;border-radius: 50%;">
        </div>

        <div style="display: inline-block;vertical-align: center;width: 60%;color: black;height: 100%;">
            <div style="height: 30px;top: 100px;">
                <span>{{ realname }}（{{ job_number }}）</span>
            </div>
            <div>
                京山市人民医院 / {{ department }}
            </div>
        </div>

        <div style="display: inline-block;vertical-align: center;width: 120px;float: right;">
            <button onclick="online_tag()" style="width: 100px;height: 35px;line-height: 35px;border: #1E90FF solid 1px;background-color: #1E90FF;border-radius: 4px;color: white;margin-top: 12.5px;">编辑</button>
        </div>

        <div style="display: inline-block;vertical-align: center;width: 120px;float: right;">
            <button onclick="online_tag1()" style="width: 100px;height: 35px;line-height: 35px;border: #1E90FF solid 1px;background-color: #1E90FF;border-radius: 4px;color: white;margin-top: 12.5px;">修改密码</button>
        </div>
    </div>
    <div style="width: 100%;height: 92.7%;background-color: white;font-size: 0;">
        <div style="width: 20%;height: 100%;border-right: #cccccc solid 1px;display: inline-block;vertical-align: top;font-size: 14px;">
            <div style="width: 100%;height: 300px;text-align: center;padding-top: 5%;"><img id="big_heard" src="../../static/personal_center/img/default.jpeg" alt="" style="width: 70%;height: 90%;"></div>
            <div>
                <div style="width: 100%;height: 50px;">
                    <div style="width: 45%;padding-left: 15%;display: inline-block">账号：</div><div style="width: 50%;padding-left: 2%;display: inline-block;">{{ job_number }}</div>
                </div>
                <div style="width: 100%;height: 50px;">
                    <div style="width: 45%;padding-left: 15%;display: inline-block">部门：</div><div style="width: 50%;padding-left: 2%;display: inline-block;">{{ department }}</div>
                </div>
                <div style="width: 100%;height: 50px;">
                    <div style="width: 45%;padding-left: 15%;display: inline-block">角色：</div><div style="width: 50%;padding-left: 2%;display: inline-block;">{{ position }}</div>
                </div>
            </div>

            <div style="width: 100%;text-align: center;">
                <a href="javascript:;" class="file">
                    <i class="iconfont icon-upload"></i> 上传头像
                    <input type="file" name="" id="HeadPortrait" onchange="UpdateHeadPortraitView()">
                </a>
            </div>
        </div>
        <div style="width: 79.8%;height: 100%;display: inline-block;vertical-align: top;font-size: 14px;">
            <div style="width: 100%;height: 40px;border-bottom: #cccccc solid 1px;padding-left: 2%;line-height: 40px;background-color: #F5F5F5;color: black;border-left: #1E90FF 3px solid;">基本信息</div>
            <div>
                <div style="width: 100%;height: 60px;line-height: 60px;padding-left: 2%;">
                    <label for="" style="width: 70px;">岗位:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ position }}</div>
                    <label for="" style="width: 70px;margin-left: 20%;">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ post_job }}</div>
                </div>
                <div style="width: 100%;height: 60px;line-height: 60px;padding-left: 2%;">
                    <label for="" style="width: 70px;">学历:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ education }}</div>
                    <label for="" style="width: 70px;margin-left: 20%;">政治面貌:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ political_outlook }}</div>
                </div>
                <div style="width: 100%;height: 60px;line-height: 60px;padding-left: 2%;">
                    <label for="" style="width: 70px;">生日:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ birthday }}</div>
                    <label for="" style="width: 70px;margin-left: 20%;">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ age }}</div>
                </div>
            </div>

            <div style="width: 100%;height: 40px;border-bottom: #cccccc solid 1px;padding-left: 2%;line-height: 40px;background-color: #F5F5F5;color: black;border-left: #1E90FF 3px solid;">通讯信息</div>
            <div>
                <div style="width: 100%;height: 60px;line-height: 60px;padding-left: 2%;">
                    <label for="" style="width: 70px;">移动电话:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ phine_num }}</div>
                    <label for="" style="width: 70px;margin-left: 20%;">电子邮箱:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ email }}</div>
                </div>
                <div style="width: 100%;height: 60px;line-height: 60px;padding-left: 2%;">
                    <label for="" style="width: 70px;">微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ wechat_number }}</div>
                    <label for="" style="width: 70px;margin-left: 20%;">Q&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Q:</label><div style="width: 200px;border-bottom: #cccccc solid 1px;display: inline-block;padding-left: 1%;height: 40px;">{{ QQ }}</div>
                </div>

                <div style="width: 100%;height: 60px;line-height: 60px;padding-left: 2%;">
                    <label for="" style="width: 70px;">签名:</label>
                    <a href="javascript:;" class="file">
                        <i class="iconfont icon-upload"></i> 上传签名
                        <input type="file" name="" id="signature_picture" onchange="upload_signature_picture()">
                    </a>
                <div>
                    <img id="signature_picture_url_img" style="width: 150px;height: 60px;" src="{{ signature_picture }}" alt="">
                </div>
            </div>
        </div>
    </div>
    </div>
    <hr>

    <div id="addForm">
        <!-- 标题 -->
        <div id="title">
            <h5 style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;font-size: 18px;">所属科室</h5>
            <div class="search" style="vertical-align: center;display: inline-block;text-align: right;margin-left: 35%;font-size: 14px;">
                <input type="text" placeholder="请输入..." name="" id="search_data" value="">
                <button onclick="search_dep()" id="search_button">搜索</button>
            </div>
            <span onclick="close_models1()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
        </div>
        <hr>
        <div id="processed" style="width: 100%;height: 500px;overflow: auto;vertical-align: top;left: 0;padding-left: 2%;">
            {% for company in company_list %}
                <div style="display: inline-block;width: 300px;height: 30px;line-height: 30px;font-size: 14px;color: #0b0b0b;">
                    <input class="check_box" id="{{ company.name }}({{ company.id }})" type="checkbox"> {{ company.name }}
                </div>
            {% endfor %}
        </div>

        <hr>
        <div style="height: 70px;padding-right: 2%;font-size: 14px;">
            <button onclick="summit_val()" id="model-affirm2" style="border-radius: 3px;height: 30px;float: right;margin-top: 15px;border: #1E90FF solid 1px;background: #1E90FF;color: white;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </button>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("information").className = "add_class";
            document.getElementById("my-center").className = "add-nav-active";
        };
        var company_list = '{{ company_list | safe }}';
        var head_portrait_pic = "{{ head_portrait | safe }}";
        document.getElementById("title_heard").src = head_portrait_pic;
        document.getElementById("big_heard").src = head_portrait_pic;
        document.getElementById("model-img").src = head_portrait_pic;
        var job_number = "{{ job_number}}";
        function upload_signature_picture() {
            var form = new FormData();
            var files = document.getElementById("signature_picture").files[0];
            var username = job_number;
            form.append('files', files);
            form.append('username', username);

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/system-setup/update-signature-picture", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);

                        if (JsonDate['code']===200){
                            console.log(JsonDate['data']["signature_picture"]);
                             document.getElementById("signature_picture_url_img").src = JsonDate['data']["signature_picture"]
                        }
                        else{
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }

        function UpdateHeadPortraitView() {
            var form = new FormData();
            var files = document.getElementById("HeadPortrait").files[0];
            var username = job_number;
            form.append('HeadPortrait', files);
            form.append('username', username);

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/system-setup/update-headPortrait-view", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);

                        if (JsonDate['code']===200){
                            console.log(JsonDate['data']["signature_picture"]);
                             document.getElementById("title_heard").src = JsonDate['data']["head_portrait"];
                             document.getElementById("big_heard").src = JsonDate['data']["head_portrait"]
                        }
                        else{
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }

        function online_tag() {
            document.getElementById("new_models1").style.display = "table-row";
        }

        function online_tag1() {
            document.getElementById("new_models2").style.display = "table-row";
        }

        let title = document.querySelector("#box");
        let addForm = document.querySelector("#new_models");

        title.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm.offsetLeft;
            let y = e.pageY - addForm.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                addForm.style.left = e.pageX - x + 'px';
                addForm.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        let title1 = document.querySelector("#title");
        let addForm1 = document.querySelector("#addForm");

        title1.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm1.offsetLeft;
            let y = e.pageY - addForm1.offsetTop;


            document.addEventListener("mousemove", move);
            function move(e) {
                addForm1.style.left = e.pageX - x + 'px';
                addForm1.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });


        let title2 = document.querySelector("#box2");
        let addForm2 = document.querySelector("#new_models3");

        title2.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm2.offsetLeft;
            let y = e.pageY - addForm2.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                addForm2.style.left = e.pageX - x + 'px';
                addForm2.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function close_models() {
            document.getElementById("new_models1").style.display = "none";
        }

        function close_models2() {
            document.getElementById("new_models2").style.display = "none";
        }

        function update_user() {
            document.getElementById("loading").style.display='inline-block';
            var form = new FormData();
            var real_name = document.getElementById("real_name").value;
            var username = document.getElementById("username").value;
            var department = document.getElementById("department").value;
            var education = document.getElementById("education").value;
            var position = document.getElementById("position").value;
            var postJob = document.getElementById("postJob").value;
            var political_outlook = document.getElementById("political_outlook").value;
            var birthday = document.getElementById("birthday").value;
            var age = document.getElementById("age").value;
            var mobile = document.getElementById("mobile").value;
            var mailbox = document.getElementById("mailbox").value;
            var wechat_number = document.getElementById("wechat_number").value;
            var QQ = document.getElementById("QQ").value;

            var xhr=new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/system-setup/user-list", true);
            form.append('real_name', String(real_name));
            form.append('username', String(username));
            form.append('department', String(department));
            form.append('education', String(education));
            form.append('postJob', String(postJob));
            form.append('political_outlook', String(political_outlook));
            form.append('birthday', String(birthday));
            form.append('age', String(age));
            form.append('wechat_number', String(wechat_number));
            form.append('QQ', String(QQ));
            form.append('mobile', String(mobile));
            form.append('mailbox', String(mailbox));
            form.append('position', String(position));

            xhr.send(form);
            xhr.onreadystatechange=function(){
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display='none';
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200){
                            alert("修改成功！");
                            location.reload();
                        }
                        else {
                            alert(JsonDate["message"])
                        }
                    }
                }
            }
        }

        function update_user2() {
            document.getElementById("loading").style.display='inline-block';
            var form = new FormData();
            var old_pwd = document.getElementById("old_pwd").value;
            var new_pwd = document.getElementById("new_pwd").value;
            var confirm_password = document.getElementById("confirm_password").value;
            if (!old_pwd){
                alert("请输入原密码！");
                return false
            }
            if (!new_pwd){
                alert("请输入新密码！");
                return false
            }
            if (new_pwd !== confirm_password){
                alert("两次密码不符，请重新输入！");
                return false
            }


            var xhr=new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/personal-center/ChangePassword", true);
            form.append('old_password', String(old_pwd));
            form.append('new_password', String(new_pwd));
            form.append('new_password2', String(confirm_password));

            xhr.send(form);
            xhr.onreadystatechange=function(){
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display='none';
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200){
                            alert("修改成功！");
                            window.location.href='/personal-center/logout';
                        }
                        else {
                            alert(JsonDate["message"])
                        }
                    }
                }
            }
        }

        function add_color(obj_id) {
            document.getElementById(obj_id).style.border = "solid 1px #0c6fd9"
        }

        function del_color(obj_id) {
            document.getElementById(obj_id).style.border = "solid 1px #efefef"
        }

        function show_model() {
            document.getElementById("addForm").style.display="table-row";
        }

        function close_models1() {
            document.getElementById("addForm").style.display = "none";
        }

        function summit_val() {
            var cleck_box_list = document.getElementsByClassName("check_box");
            var xuanzhong = ""
            for (var t=0; t<cleck_box_list.length; t++){
                if (cleck_box_list[t].checked){
                    xuanzhong = xuanzhong+cleck_box_list[t].id+", "
                }
            }
            document.getElementById("department").value=xuanzhong.slice(0, -2);
            document.getElementById("addForm").style.display = "none";
        }

        function search_dep(){
            var search_keyword = document.getElementById("search_data").value;
            var processed = document.getElementById("processed");
            processed.innerHTML = "";
            console.log(company_list.length)
            for (var h=0; h<company_list.length; h++){
                if (company_list[h]["name"].indexOf(search_keyword) !== -1){
                    console.log(company_list[h]["name"])
                    var div_tag = document.createElement("div");div_tag.className="div_clase";
                    div_tag.innerHTML = '<input class="check_box" id="'+company_list[h]["name"]+'('+ company_list[h]["id"]+')'+'" type="checkbox"> '+ company_list[h]["name"];
                    processed.appendChild(div_tag)
                }
            }
        }
    </script>
{% endblock %}
